<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Example Work PagePage</title>
    <link type="text/css" href="/divirt/jquery/theme/ui.all.css" rel="Stylesheet" />
    <script type="text/javascript" src="/divirt/jquery/jquery.js"></script>
    <script type="text/javascript" src="/divirt/jquery/jquery-ui.js"></script>
    <script type="text/javascript">
      $(function(){

        // Accordion
        $("#accordion").accordion({ header: "h3" });

        // let the gallery items be draggable
        var $accordion = $('#accordion');
        $('li',$accordion).draggable({
          //cancel: 'a.ui-icon',// clicking an icon won't initiate dragging
          revert: 'invalid', // when not dropped, the item will revert back to its initial position
          containment: 'document',
          scroll: false,
          opacity: 0.4,
          helper: 'clone',
          cursor: 'move'
          });

        var $subnets = $('#subnets');
        // let the subnets be droppable, accepting the accordion items
        $('div',$subnets).droppable({
          accept: '*',
          activeClass: 'ui-state-highlight',
          drop: function(ev, ui) { addToSubnet(ui.draggable,$(this)); }
        });

        function addToSubnet($item, $subnet) {
          var $copy = $item.clone()
          var $list = $('ul',$subnet).length ? $('ul',$subnet) : $('<ul class="gallery ui-helper-reset"/>').appendTo($subnet);
          $copy.appendTo($list).fadeIn(function(){ $item.animate({opacity: 1})});
        }

      });
    </script>
    <style type="text/css">
      body{font: 80% "Trebuchet MS", sans-serif; margin: 20px;}
      div.subnet{float:left; width:22.6%; height:96%; padding:5px; margin:5px;
                 text-align:center; overflow:auto;}
      .ui-widget-header{margin:0 0 5px 0;}

      .gallery.custom-state-active { background: #eee; }
      .gallery li { float: left; width: 48px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
      .gallery li h6 { margin: 0 0 0.4em; cursor: move; }
      .gallery li a { float: right; }
      .gallery li a.ui-icon-zoomin { float: left; }
      .gallery li img { width:100%; cursor: move; }

    </style>
  </head>
  <body>
    <!-- whole workspace -->
    <div id="workspace" style="width:1300px">
      <!-- Left bar -->
      <div style="float:left; width:200px">
        <!-- Accordion -->
        <div id="accordion">
          <div>
            <h3><a href="#">Development Machines</a></h3>
	    <ul class="gallery ui-helper-reset">
	      <li class="ui-widget-content ui-corner-all">
		<h6 class="ui-widget-header">CentOS 4.4</h6>
		<img src="/divirt/images/icon-computer.png" width="48" height="48"/>
		<h6 class="ui-widget-header">devel</h6>
	      </li>
	      <li class="ui-widget-content ui-corner-all">
		<h6 class="ui-widget-header">CentOS 5.2</h6>
		<img src="/divirt/images/icon-computer.png" width="48" height="48"/>
		<h6 class="ui-widget-header">devel</h6>
	      </li>
	      <li class="ui-widget-content ui-corner-all">
		<h6 class="ui-widget-header">Fedora 8</h6>
		<img src="/divirt/images/icon-computer.png" width="48" height="48"/>
		<h6 class="ui-widget-header">devel</h6>
	      </li>
	      <li class="ui-widget-content ui-corner-all">
		<h6 class="ui-widget-header">Fedora 10</h6>
		<img src="/divirt/images/icon-computer.png" width="48" height="48"/>
		<h6 class="ui-widget-header">devel</h6>
	      </li>
	    </ul>
          </div>
          <div>
            <h3><a href="#">Runtime Machines</a></h3>
	    <ul class="gallery ui-helper-reset">
	      <li class="ui-widget-content ui-corner-all">
		<h6 class="ui-widget-header">CentOS 4.4</h6>
		<img src="/divirt/images/icon-computer.png" width="48" height="48"/>
		<h6 class="ui-widget-header">runtime</h6>
	      </li>
	      <li class="ui-widget-content ui-corner-all">
		<h6 class="ui-widget-header">CentOS 5.2</h6>
		<img src="/divirt/images/icon-computer.png" width="48" height="48"/>
		<h6 class="ui-widget-header">runtime</h6>
	      </li>
	    </ul>
          </div>
          <div>
            <h3><a href="#">Vxworks</a></h3>
	    <ul class="gallery ui-helper-reset">
	      <li class="ui-widget-content ui-corner-all">
		<h6 class="ui-widget-header">Fictional</h6>
		<img src="/divirt/images/icon-computer.png" width="48" height="48"/>
		<h6 class="ui-widget-header">not real</h6>
	      </li>
	    </ul>
          </div>
        </div> <!-- accordion -->
      </div>
      <!-- horizontal spacer -->
      <div style="float:left; width:10px; height:1px">
      </div> <!-- horizontal spacer -->
      <!-- work area -->
      <div style="float:left; width:1000px; height:800px; border-width:2px; border-style:solid; border-color:gray">
	<!-- subnets -->
	<div id="subnets" style="height:600px">
	  <div class="ui-corner-all ui-widget-content subnet">
	    <h3 class="ui-widget-header">10.10.1.0/24</h3>
	  </div>
	  <div class="ui-corner-all ui-widget-content subnet">
	    <h3 class="ui-widget-header">10.10.2.0/24</h3>
	  </div>
	  <div class="ui-corner-all ui-widget-content subnet">
	    <h3 class="ui-widget-header">10.10.3.0/24</h3>
	  </div>
	  <div class="ui-corner-all ui-widget-content subnet">
	    <h3 class="ui-widget-header">10.10.4.0/24</h3>
	  </div>
	</div> <!-- subnets -->
	<!-- information area -->
	<div style="height:200px; background-color:lightblue">
	  Information Area
	</div> <!-- information area -->
      </div> <!-- work area -->
    </div> <!-- workspace -->
  </body>
</html>
